/* 
*1.登录功能  
 3.登录注册切换卡
  3.1页面默认为登录，登录默认有选中样式
  3.2绑定点击事件，点击登录或者切换，则对应按钮设置为选中样式，同时页面跳转为对应页面
*/
class OnLogin {
    constructor() {
        //表单元素
        this.root = document.querySelector('form')
        //登录界面
        this.code = this.root.querySelector('.code') //验证码
        this.username = this.root.querySelector(' input[name = username]') //账户框
        this.password = this.root.querySelector('input[name = password]') //密码框
        this.vcode = this.root.querySelector(' .vcode') //验证码框
        this.username_msg = this.root.querySelector('.username_msg') //账户框提示信息
        this.psd_msg = this.root.querySelector('.psd_msg') //密码框提示信息
        this.code_msg = this.root.querySelector('.code_msg') //验证码框提示信息
        this.btn = this.root.querySelector('button') //登录按钮
        //我已知道按钮
        this.checkbox = this.root.querySelector('#agree')
        //全局变量，表单状态
        this.state1 = false //账户框
        this.state2 = false //密码框
        this.state3 = false //验证码框
    }
    //表单所有验证是否通过
    checkBtnIsUsable() {
        if (this.state1 && this.state2 && this.state3) {
            this.login()  //启用登录键
        }
    }
    //首次进入页面做判断,判断是否有自动填充的账户密码
    init(){
        let str1 = this.username.value
        let str2 = this.password.value
        if(str1 && str2){
          this. usernameValue()
          this. psdValue()
        }
    }
    //登录功能
    login() {
        this.btn.style.background = '#ff5c00'
        this.btn.removeAttribute('disabled')
        this.btn.addEventListener('click', e => {
            e = e || window.event
            e.preventDefault ? e.preventDefault() : e.returnValue = false
            if (!this.checkboxStatus()) {
                return 
            }
            console.log(this.username.value,this.password.value);
          axios({
            method: 'post',
            url: 'http://api.yuguoxy.com/api/member/login',
            data: {
                username: this.username.value,
                password: this.password.value,
            },
        }).then(response => {
            let data = response.data
            let { resultCode, resultInfo } = data //解构赋值
            if (resultCode == 1) {
                let user = resultInfo
                localStorage.setItem('USER', JSON.stringify(user))
                location.href = "../pages/index.html"
            }else{
                this.code_msg.innerHTML = '账号或者密码出错！！'
            }
        })
        })
    }
    //账户非空验证
    checkUsernameISNull() {
        this.username.addEventListener('blur', () => {
            this.usernameValue()
        })
    }
    // 账户内容判断 
    usernameValue() {
        let value = this.username.value
        if (value) {
            this.username_msg.innerHTML = ""
            this.state1 = true
            this.checkBtnIsUsable()
        } else {
            return this.username_msg.innerHTML = "请输入账号"

        }
    }
    //密码非空验证
    checkPsdISNull() {
        this.password.addEventListener('blur', () => {
           this.psdValue()
        })
    }
    // 密码内容判断
    psdValue(){
        let value = this.password.value
            if (value) {
            if (this.psdTest()) {
                this.psd_msg.innerHTML = ""
                this.state2 = true
                this.checkBtnIsUsable()
            } else {
                this.psd_msg.innerHTML = "密码必须是8到16位数字字母组合"
                return
            }

        } else {
            this.psd_msg.innerHTML = "请输入密码"
            return true
        }
    }
    //密码强度验证验证
    psdTest() {
        let value = this.password.value
        let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/
        let status = reg.test(value)
        if (status) {
            return true
        } else {
            return false
        }
    }
    //验证码非空验证
    checkVcodeISNull() {
        this.vcode.addEventListener('blur', () => {
            let value = this.vcode.value
            if (value) {
                if (this.checkVcodeFlase()) {
                    this.state3 = true
                    this.checkBtnIsUsable()
                } else {
                    return
                }

            } else {
                this.code_msg.innerHTML = '验证不能为空'
                return
            }
        })

    }
    //验证码正确性验证
    checkVcodeFlase() {
        let value = this.vcode.value
        let vcode = this.code.innerHTML
        value = value.toLowerCase()
        vcode = vcode.toLowerCase()
        if (value != vcode) {
            this.code_msg.innerHTML = '验证码输入错误'
            return false
        } else {
            this.code_msg.innerHTML = ''
            return true
        }
    }
    //用户须知验证
    checkboxStatus() {
        let state = this.checkbox.checked
        if (state) {
            this.code_msg.innerHTML = ''
            return true
        } else {
            this.code_msg.innerHTML = '请认真阅读用户协议和隐私政策，如果认可请勾选同意'
            return false
        }
    }
    //生成验证码
    createVcode() {
        //验证码数据库
        let arr = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0',
            'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j',
            'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
            'u', 'v', 'w', 'x', 'y', 'z',
            'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',
            'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T',
            'U', 'V', 'W', 'X', 'Y', 'Z'
        ]
        let vcode = ''
        // 随机生成四位数验证码
        for (let i = 0; i < 4; i++) {
            //生成随机数随机获取验证码数据库的数据
            let index = Math.floor(Math.random() * arr.length)
            vcode += arr[index]
        }
        this.code.innerHTML = vcode

    }
    //更换验证码
    changeVcode() {
        this.createVcode()
    }
}
let user = new OnLogin()
user.createVcode()
user.changeVcode()
user.checkUsernameISNull() 
user.checkPsdISNull()
user.checkVcodeISNull()
user.init()